<template>
    <div>
        <el-dialog
            width="70%"
            title="商品SKU"
            :visible.sync="visibleSkus"
            :close-on-click-modal="false">

            <!-- 基本搜索+功能按钮 -->
                <el-form ref="searchForm1" :inline="true" :model="searchForm" size="medium" label-width="">
                    <el-card class="table_tool_bar_wrap" shadow="never">
                        <div class="base_wrap">
                            <div class="left">
                                <el-form-item label="关键字搜索" prop="keyword">
                                    <el-input placeholder="" v-model="searchForm.keyword" clearable/>
                                </el-form-item>
                                <el-button @click="handleSearch" type="primary" size="medium">搜索</el-button>
                                <el-button @click="handleReset" type="info" plain size="medium">重置</el-button>
                            </div>

                            <div class="right">
                                <el-button @click="insertSkuToWms()" type="primary" size="medium" :disabled="selectionRows.length == 0">确认关联</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-form>

            <!-- 表格 -->
                <el-table
                    class="mt10"
                    ref="table"
                    size="medium"
                    height="500"
                    empty-text="暂无数据"
                    element-loading-text="给我一点时间"
                    fit border highlight-current-row
                    v-loading="loading"
                    :data="dataList"
                    @selection-change="handleSelection">

                    <el-table-column type="selection" width="55" prop="selection" align="center"></el-table-column>
                    <!-- <el-table-column label="序号" type="index" prop="index" width="60" align="center" /> -->
                    <el-table-column label="规格图片" align="center" width="130">
                        <template slot-scope="scope">
                            <el-image style="width: 100px; height: 100px" :src="scope.row.skuImg" fit="contain"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column label="SKU名称" min-width="300">
                        <template slot-scope="scope">
                            <div>SKU码：{{scope.row.id}}</div>
                            <div>{{scope.row.skuName}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="销售价(元)" width="120" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span style="color: red;">￥{{scope.row.salePrice}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="市场价(元)" width="120" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>￥{{scope.row.marketPrice}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="库存" prop="stockNum" align="left" width="120" show-overflow-tooltip/>
                    <el-table-column label="销量" prop="salesVolume" align="left" width="120" show-overflow-tooltip/>



                </el-table>

                <!-- 分页 -->
                <TablePagination
                    :total.sync="total"
                    :page.sync="searchForm.page"
                    :limit.sync="searchForm.limit"
                    @handleSizeChange="handleSizeChange"
                    @handleCurrentChange="handleCurrentChange"/>

        </el-dialog>
    </div>
</template>

<script>
// import TableMixin from '@/mixin/TableMixin'
import TablePagination from '@/views/components/table/table-pagination'
export default {
    // mixins: [TableMixin],
    components: {
        TablePagination,
    },
    data() {
        return {
            loadingSku: false,
            visibleSkus: false,
            dataListSku: [],

            dataList: [],
            total: 0,
            loading: false,
            selectionRows: [],
            searchFlag: true,
            searchForm: {
                page: 1,
                limit: 10,
                sortColumns: null,
                sortType: null,
                keyword: null
            },
        }
    },

    methods: {
        init(spuId) {
            const refs = this.$refs
            this.visibleSkus = true

            this.$nextTick(() => {
                this.getDataList()
            })
        },

        /**
         * 获取表格数据
         */
        async getDataList() {
            this.loading = true
            const res = await this.$http({
                url: '/mall/pmssku/page',
                method: 'GET',
                params: this.searchForm
            })
            if (this.ResultMessage(res, false)) {
                this.dataList = res.data.records || []
                this.total = res.data.total
            }
            this.loading = false
        },

        async insertSkuToWms() {
            let rows = this.selectionRows
            if(rows && rows.length > 0) {
                this.$emit('insertSkuToWms', this.selectionRows)
                this.submitLoading = false
                this.visibleSkus = false
            } else{
                this.$notify({ title: '提示', message: '请选择需要关联的数据', type: 'warning' });
            }

        },

        /**
         * 多选
         */
        handleSelection(selection) {
            this.selectionRows = selection
        },

        /**
         * 每页数
         */
        handleSizeChange(val) {
            this.searchForm.limit = val
            this.getDataList()
        },
        /**
         * 当前页
         */
        handleCurrentChange(val) {
            this.searchForm.page = val
            this.getDataList()
        },

        /**
         * 搜索
         */
        handleSearch() {
            this.getDataList()
        },
        /**
         * 重新加载数据表格
         */
        handleReload() {
            this.getDataList()
        },
        /**
         * 重置搜索表单
         */
        handleReset() {
            this.$refs.searchForm1.resetFields()
            this.$refs.searchForm2.resetFields()
        }

    }
};
</script>

<style lang="scss" scoped></style>
